<template>
  <!-- <dao title="验证码登录" color="#000" /> -->

  <view style="margin-top: 50px">
    <!-- <text style="font-size: 24px">手机验证码登录</text> -->
    <view>
      <uni-forms
        ref="valiForm"
        :rules="datas.rules"
        :modelValue="datas.valiFormData"
      >
        <uni-forms-item name="name">
          <uni-easyinput
            v-model="datas.valiFormData.name"
            @input="kongyan"
            placeholder="请输入手机号"
          >
            <template #right>
              <view v-if="liushi" style="color: #ccc"
                >重新发送({{ daojishi }}秒)</view
              >
              <view
                v-else
                @click="danjiao"
                :style="{ color: yanoding ? '#93b4da' : '#ccc' }"
                >获取验证码</view
              >
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="age">
          <uni-easyinput
            v-model="datas.valiFormData.age"
            placeholder="请输入验证码"
          >
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>
    <button class="brn" @click="submit">登录</button>
    <!-- <div class="wang">
      <text @click="tui">账号密码登录</text>
    </div> -->
  </view>
</template>

<script lang="ts" setup>
import { useCounterStore } from "../../../stores/counter";
import {getyanzheng,login,getuser,dengyanzheng } from '../../../api/login'
import dao from "../../conpments/daohang.vue";

import {
  onMounted,
  ref,
  nextTick,
  reactive,
  inject,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";

const props = defineProps(['rre'])

const emit = defineEmits(['reeche',])
const mychat: any = inject("mychat");

const counter = useCounterStore();
const datas = reactive({
  // 校验表单数据

  valiFormData: {
    name: "",
    age: "",
    introduction: "",
  },
  rules: {
    name: {
      rules: [
        {
          required: true,
          errorMessage: "手机号不能为空",
        },
        {
          pattern: /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/,
          errorMessage: "手机号格式有误！",
        },
      ],
      validateTrigger: "blur",
    },
    age: {
      rules: [
        {
          required: true,
          errorMessage: "验证码不能为空",
        },
      ],
    },
  },
});
const liushi = ref(false);
let daojishi = ref(60);
const valiForm = ref<HTMLFormElement | null>(null);
const danjiao = () => {
  valiForm
    .value!.validateField(["name"])
    .then((res: any) => {
      liushi.value = true;
      daojishi.value = 60;
      getyanzheng({purePhoneNumber:datas.valiFormData.name}).then((res:any) => {console.log(res);
      })
      let timer = setInterval(() => {
    

        daojishi.value--;
        if (daojishi.value == 0) {
          liushi.value = false;
          clearInterval(timer);
        }
      }, 1000);
      // 成功返回，res 为对应表单数据
      // 其他逻辑处理
      // ...
    })
    .catch((err: any) => {
      // 表单校验验失败，err 为具体错误信息
      // 其他逻辑处理
      // ...
    });
};
let yanoding = ref(false);
const kongyan = () => {
  nextTick(() => {
    let tes = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
    if (tes.test(datas.valiFormData.name)) {
      yanoding.value = true;
    } else {
      yanoding.value = false;
    }
  });
};
const submit = () => {
if(!props.rre){
  emit('reeche')
}else{
  valiForm
    .value!.validate()
    .then((res: any) => {
      console.log("success", res);
      uni.login({
      provider: "weixin", //使用微信登录
      univerifyStyle: {
        fullScreen: true,
      },
      onlyAuthorize: true,
      success: async function (loginRes) {
        // 发起请求，一个登入请求

        const { data } = await dengyanzheng(
        {purePhoneNumber:datas.valiFormData.name,sms_code:datas.valiFormData.age,
          js_code:loginRes.code}  
        );
        //打印请求结果

        //判断请求结果，并执行对应的逻辑
        if (data.code == 200) {
          // 请求成功，执行登入成功逻辑
          
          // 把token存入本地
          uni.showToast({
            title: "登录成功！",
            icon: "success",
            duration: 200,
          });
         
          setTimeout( async()=>{
            counter.instquan(data.data.purePhoneNumber);
          counter.increment(data.data.token);
          // 登陆成功建立链接
          mychat.create()
          mychat.onSocketOpen()
          const res = await getuser();
          counter.instUser(res.data.data);
          },500)
       
        } else {
          uni.showModal({
	title: '提示',
  showCancel:false,
	content: data.msg,
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} 
	}
});
        }
      },
    });
      

     
    })
    .catch((err: any) => {
      console.log("err", err);
    });
}

};
</script>

<style lang="scss" scoped>
::v-deep .is-input-border {
  border: 0 !important;
}
::v-deep .brn {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);
}
::v-deep .uni-forms-item .is-required {
  display: none;
}
.wang {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  width: 100%;

  font-size: 28rpx;
  color: #b4b3b3;
}
::v-deep .uni-easyinput__content {
  border-radius: 0rpx;
  border-top: 0 !important;
}
:v-deep(.is-input-border) {
  border-top: 0 !important;
}
</style>
